<template>
  <a-form ref="formRef" class="form" :model="filterData" layout="inline">
    <a-form-item key="name" name="name">
      <a-input v-model:value="filterData.name" placeholder="搜索指标">
        <template #prefix> <search-outlined /> </template>
      </a-input>
    </a-form-item>
    <a-form-item v-for="item in filterForm" :key="item.key" :name="item.key">
      <component
        :is="compMap[item.type] || 'a-' + item.type"
        v-model:value.trim="filterData[item.key || '']"
        :placeholder="`${item.type === 'select' ? '请选择' : '请填写'}${
          item.label
        }`"
        :allowClear="true"
        v-bind="{ ...item.props, required: false }"
      />
    </a-form-item>
  </a-form>
  <a-radio-group v-model:value="value" class="box">
    <a-radio
      :value="item.value + item.indicator3Id"
      :key="item.value + item.indicator3Id"
      v-for="item in indicators"
      >{{ item.indicator3Name }}（{{ item.label }} - {{ item.indicator1Name }} -
      {{ item.indicator2Name }}）</a-radio
    >
  </a-radio-group>
</template>
<script lang="ts" setup>
import { Indicator3Item } from "@/api";
import { compMap } from "@/components/Form/config";
import { projectPrototypeForm } from "@/utils";
import { cloneDeep } from "lodash-es";
import { Ref, ref, watchEffect } from "vue";
const props = defineProps<{ projectDetail: Ref<Record<string, any>> }>();
const filterData = ref<Record<string, any>>({ name: "" });
const filterForm = projectPrototypeForm;
const value = ref();
const indicators = ref<Indicator3Item[]>();
watchEffect(() => {
  if (props.projectDetail?.value?.basicInfo) {
    filterData.value = cloneDeep(props.projectDetail.value.basicInfo);
  }
});
// watch(
//   filterData,
//   (val) => {
//     getIndicators(val).then((res) => {
//       indicators.value = res;
//     });
//   },
//   { deep: true, immediate: true }
// );
</script>
<style lang="scss" scoped>
.box {
  border: 1px solid #ccc;
  padding: 16px 16px 0;
  height: 500px;
  overflow: auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  align-items: center;
  & > * {
    font-size: 16px;
    margin-bottom: 16px;
  }
}
</style>
